<template>
  <div class="system-role-dialog-container">
    <el-dialog
      :title="state.dialog.title"
      @open="openDialogLs"
      @close="closeDialog"
      v-model="state.dialog.isShowDialog"
      width="769px"
    >
      <div class="el-form-ls">
        <el-form
          class="el-form-new"
          ref="roleDialogFormRef"
          :rules="rules"
          :model="state.ruleForm"
          size="default"
          label-width="140px"
        >
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="明细项目名称：" prop="MingXiXiangMuMingCheng">
                <el-input
                  ref="MingXiXiangMuMingChengRef"
                  @keydown.enter="MingXiXiangMuMingChengKey"
                  v-model="state.ruleForm.MingXiXiangMuMingCheng"
                  placeholder="请输入明细项目名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="拼音码：" prop="PYM">
                <el-input
                  ref="PYMRef"
                  @keydown.enter="PYMKey"
                  v-model="state.ruleForm.PYM"
                  placeholder="请输入拼音码"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="适用性别：" prop="ShiYongXingBie">
                <el-select
                  ref="ShiYongXingBieRef"
                  v-model="state.ruleForm.ShiYongXingBie"
                  class="m-2"
                  placeholder="请选择适用性别"
                >
                  <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="报告所属分类：" prop="BaoGaoSuoShuFenLei">
                <el-select v-model="state.ruleForm.BaoGaoSuoShuFenLei" class="m-2" placeholder="请选择报告所属分类">
                  <el-option v-for="item in baoGaoType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="参考范围：" prop="CanKaoFanWei">
                <el-input
                  ref="CanKaoFanWeiRef"
                  @keydown.enter="CanKaoFanWeiKey"
                  v-model="state.ruleForm.CanKaoFanWei"
                  placeholder="请输入参考范围"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="结果类型：" prop="JieGuoLeiXing">
                <el-select ref="JieGuoLeiXingRef" v-model="state.ruleForm.JieGuoLeiXing" class="m-2" placeholder="请选择结果类型">
                  <el-option v-for="item in jieGuoType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="参考下限：" prop="CanKaoXiaXian">
                <el-input
                  ref="CanKaoXiaXianRef"
                  @keydown.enter="CanKaoXiaXianKey"
                  v-model="state.ruleForm.CanKaoXiaXian"
                  placeholder="请输入参考下限"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="单位：" prop="DanWei">
                <el-input
                  ref="DanWeiRef"
                  @keydown.enter="DanWeiKey"
                  v-model="state.ruleForm.DanWei"
                  placeholder="请输入单位"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="偏低提示：" prop="PianDiTiShi">
                <el-input
                  ref="PianDiTiShiRef"
                  @keydown.enter="PianDiTiShiKey"
                  v-model="state.ruleForm.PianDiTiShi"
                  placeholder="请输入偏低提示"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="参考上限：" prop="CanKaoShangXian">
                <el-input
                  ref="CanKaoShangXianRef"
                  @keydown.enter="CanKaoShangXianKey"
                  v-model="state.ruleForm.CanKaoShangXian"
                  placeholder="请输入参考上限"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="备注1：" prop="BeiZhu1">
                <el-input
                  ref="BeiZhu1Ref"
                  @keydown.enter="BeiZhu1Key"
                  v-model="state.ruleForm.BeiZhu1"
                  placeholder="请输入备注1"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="偏高提示：" prop="PianGaoTiShi">
                <el-input
                  ref="PianGaoTiShiRef"
                  @keydown.enter="PianGaoTiShiKey"
                  v-model="state.ruleForm.PianGaoTiShi"
                  placeholder="请输入偏高提示"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="Lis项目编码：" prop="LisXiangMuBianMa">
                <el-input
                  ref="LisXiangMuBianMaRef"
                  @keydown.enter="LisXiangMuBianMaKey"
                  v-model="state.ruleForm.LisXiangMuBianMa"
                  placeholder="请输入Lis项目编码"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="备注2：" prop="BeiZhu2">
                <el-input
                  ref="BeiZhu2Ref"
                  @keydown.enter="BeiZhu2Key"
                  v-model="state.ruleForm.BeiZhu2"
                  placeholder="请输入备注2"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="是否启用：" prop="ShiFouQiYong">
                <el-switch ref="ShiFouQiYongRef" v-model="state.ruleForm.ShiFouQiYong" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="省平台编码：" prop="ShengPingTaiBianMa">
                <el-input v-model="state.ruleForm.ShengPingTaiBianMa" placeholder="请输入省平台编码" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, watch } from "vue";
import { baoGaoType, genderType, jieGuoType } from "@/utils/dict";
import { useIntegratedProject } from "@/stores/modules/integratedProject";
import { deepCopy, replaceEmpty, useFocusInput } from "@/utils";
import { PostMingXiXiangMuAdd, PutMingXiXiangMuUpdate } from "@/api/modules/integratedProject";
import { pinyin } from "pinyin-pro";
import { ElMessage } from "element-plus";

// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

const rules = reactive({
  MingXiXiangMuMingCheng: [{ required: true, message: "请填写明细项目名称" }]
});

// 定义变量内容
const roleDialogFormRef = ref<any>();
const state = reactive<any>({
  ruleForm: {},
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: ""
  }
});

// 打开弹窗
const openDialog = (type: string, row: any) => {
  state.dialog.isShowDialog = true;
  nextTick(() => {
    if (type === "edit") {
      state.ruleForm = deepCopy(row);
      state.dialog.title = "修改包含明细项目";
      state.dialog.submitTxt = "确 定";
      state.dialog.type = "edit";
      state.ruleForm.ShiFouQiYong = state.ruleForm.ShiFouQiYong === "是";
    } else {
      state.dialog.type = "add";
      state.dialog.title = "新增包含明细项目";
      state.dialog.submitTxt = "确 定";
      state.ruleForm.BaoGaoSuoShuFenLei = useIntegratedProject().baoGao;
      state.ruleForm.JieGuoLeiXing = "文本";
    }
  });
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
  roleDialogFormRef.value.resetFields();
  emit("refresh");
};
// 取消
const onCancel = () => {
  closeDialog();
};
const returnObj = () => {
  return {
    ...state.ruleForm,
    ZuHeXiangMuID: useIntegratedProject().zuHeXiangMuID,
    ShiFouQiYong: state.ruleForm.ShiFouQiYong === true ? "是" : "否",
    MingXiXiangMuMingCheng: state.ruleForm.MingXiXiangMuMingCheng ? state.ruleForm.MingXiXiangMuMingCheng : "",
    PYM: state.ruleForm.PYM ? state.ruleForm.PYM : "",
    ShiYongXingBie: state.ruleForm.ShiYongXingBie ? state.ruleForm.ShiYongXingBie : "",
    BaoGaoSuoShuFenLei: state.ruleForm.BaoGaoSuoShuFenLei ? state.ruleForm.BaoGaoSuoShuFenLei : "",
    JieGuoLeiXing: state.ruleForm.JieGuoLeiXing ? state.ruleForm.JieGuoLeiXing : "",
    DanWei: state.ruleForm.DanWei ? state.ruleForm.DanWei : "",
    CanKaoFanWei: state.ruleForm.CanKaoFanWei ? state.ruleForm.CanKaoFanWei : "",
    CanKaoXiaXian: state.ruleForm.CanKaoXiaXian ? state.ruleForm.CanKaoXiaXian : "",
    CanKaoShangXian: state.ruleForm.CanKaoShangXian ? state.ruleForm.CanKaoShangXian : "",
    PianDiTiShi: state.ruleForm.PianDiTiShi ? state.ruleForm.PianDiTiShi : "",
    PianGaoTiShi: state.ruleForm.PianGaoTiShi ? state.ruleForm.PianGaoTiShi : "",
    LisXiangMuBianMa: state.ruleForm.LisXiangMuBianMa ? state.ruleForm.LisXiangMuBianMa : "",
    BeiZhu1: state.ruleForm.BeiZhu1 ? state.ruleForm.BeiZhu1 : "",
    BeiZhu2: state.ruleForm.BeiZhu2 ? state.ruleForm.BeiZhu2 : "",
    ShengPingTaiBianMa: state.ruleForm.ShengPingTaiBianMa ? state.ruleForm.ShengPingTaiBianMa : ""
  };
};
// 提交
const onSubmit = () => {
  roleDialogFormRef.value!.validate(async valid => {
    if (!valid) return;
    if (state.dialog.type === "add") {
      let obj = {
        ...returnObj()
      };
      replaceEmpty(obj);
      PostMingXiXiangMuAdd(obj).then((res: any) => {
        if (res.Success === 0) {
          ElMessage.success({ message: `${state.dialog.title}成功！` });
          closeDialog();
          emit("refresh");
        }
      });
    } else {
      let obj = {
        // ...state.ruleForm,
        ...returnObj()
      };
      PutMingXiXiangMuUpdate(obj).then((res: any) => {
        if (res.Success === 0) {
          ElMessage.success({ message: `${state.dialog.title}成功！` });
          closeDialog();
          emit("refresh");
        }
      });
    }
  });
};

watch(
  () => {
    return state.ruleForm.MingXiXiangMuMingCheng;
  },
  () => {
    if (state.ruleForm.MingXiXiangMuMingCheng) {
      state.ruleForm.PYM = pinyin(state.ruleForm?.MingXiXiangMuMingCheng, {
        pattern: "first",
        toneType: "none"
      })
        .toUpperCase()
        .replace(/\s/g, "");
    }
  }
);

const MingXiXiangMuMingChengRef = ref();
const openDialogLs = () => {
  nextTick(() => {
    if (MingXiXiangMuMingChengRef.value) {
      MingXiXiangMuMingChengRef.value.focus();
    }
  });
};

const [PYMRef, MingXiXiangMuMingChengKey] = useFocusInput();
const [CanKaoFanWeiRef, PYMKey] = useFocusInput();
const [JieGuoLeiXingRef, CanKaoFanWeiKey] = useFocusInput();
const [DanWeiRef, CanKaoXiaXianKey] = useFocusInput();
const [PianDiTiShiRef, DanWeiKey] = useFocusInput();
const [CanKaoShangXianRef, PianDiTiShiKey] = useFocusInput();
const [BeiZhu1Ref, CanKaoShangXianKey] = useFocusInput();
const [PianGaoTiShiRef, BeiZhu1Key] = useFocusInput();
const [LisXiangMuBianMaRef, PianGaoTiShiKey] = useFocusInput();
const [BeiZhu2Ref, LisXiangMuBianMaKey] = useFocusInput();
const [ShiFouQiYongRef, BeiZhu2Key] = useFocusInput();
// 暴露变量
defineExpose({
  openDialog
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
  .el-form-ls {
    height: 50vh;
    overflow: scroll;
    .el-form-new {
      height: 100%;
    }
  }
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
